<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" />
		<view class="navName flex justify-between align-center" @click="edit(1)">
			<view class="flex align-center">
				<view class="flex align-center"
					style="width: 122rpx;height: 120rpx;flex-wrap: wrap;justify-content:center;">
					<view v-for="(item,index) in groupChatData" :key="index">
						<image mode="aspectFit" v-if="index<9" :class="func(groupChatData.length)" :src="item.avatar">
						</image>
					</view>
				</view>
				<view style="font-size: 36rpx;font-weight: 500;margin-left: 60rpx;">{{groupName}}</view>
			</view>
			<image style="width: 60rpx;height: 60rpx;" src="/static/tabbar/edit.png" mode=""></image>
		</view>
		<!-- 成员 -->
		<view class="navName">
			<view class="flex justify-between align-center"
				style="padding:4rpx 0 34rpx 0;border-bottom: 1rpx solid rgba(30,30,30,0.1);">
				<view style="font-size: 32rpx;font-weight: 400;">成员</view>
				<view class="flex justify-between align-center" @click="ProjectMembers()">
					<text style="font-size: 32rpx;font-weight: 400;">查看所有项目人员({{this.groupChatData.length}})</text>
					<image style="width: 60rpx;height: 60rpx;" src="../../clientEnd/static/2068.png" mode=""></image>
				</view>
			</view>
			<view class="flex" style="margin-top: 14rpx;">
				<view v-for="(item,index) in this.groupChatData" :key="index" v-if="index<5"
					style="width: 104rpx;height: 144rpx;margin-left: 12rpx;">
					<image class="sculptureImg" :src="item.avatar" mode=""></image>
					<view
						style="text-align: center;margin: 10rpx 0;font-size: 28rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
						{{item.personGroupName}}
					</view>
				</view>
				<view style="width: 104rpx;height: 144rpx;margin-left: 12rpx;" @click="invite(1)">
					<image class="sculptureImg" src="/static/tabbar/invite.png" mode=""></image>
					<view
						style="text-align: center;margin: 10rpx 0;font-size: 28rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
						邀请</view>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="navName">
			<view class="flex justify-between align-center" style="padding:4rpx 0;">
				<view style="font-size: 32rpx;font-weight: 400;">我的名字</view>
				<view class="flex justify-between align-center" @click="edit(2)">
					<text style="font-size: 32rpx;font-weight: 400;">{{myName}}</text>
					<image style="width: 60rpx;height: 60rpx;" src="../../clientEnd/static/2068.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 退出群聊 -->
		<view class="leave" @click="leave">
			退出群聊
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 标题栏配置
				config: {
					title: "项目群聊设置",
				},
				groupNum: '',
				groupChatData: [],
				myName: '',
				groupName: '',
				id: ''
			}
		},
		onLoad(e) {
			this.groupNum = e.groupNum
			console.log('呆呆鸟', this.groupNum)
		},
		onShow() {
			this.getGroupChat()
		},
		methods: {
			func(index) {
				if (index < 5) {
					return "sculpture";
				} else {
					return "sculptureI"
				}
			},
			// 退出群聊
			leave() {
				let data = {
					id: this.id,
					status: -1
				}
				uni.showModal({
					title: '提示',
					content: '您确定要退出群聊吗？',
					success: res => {
						if (res.confirm) {
							this.$api.deleteChat(data).then((res) => {
								uni.navigateBack({
									delta: 2
								});
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			// 邀请新成员
			invite(index) {
				this.$tools.goPageNoAuth('./inviteChat?index=' + index + '&groupNum=' + this.groupNum)
			},
			//项目群聊设置groupChat
			getGroupChat() {
				let data = {
					groupNum: this.groupNum
				}
				this.$api.groupChat(data).then((res) => {
					console.log(res, '扣扣扣扣')
					this.groupChatData = res.data.result.sysGroupPersons
					this.myName = res.data.result.myName.personGroupName
					this.id = res.data.result.myName.id
					res.data.result.sysGroupPersons.forEach((item) => {
						if (item.hasManage == 1) {
							this.groupName = item.groupName
							this.$cache.set('cf', item.groupName) //项目名
						}
					})
				})
			},
			// 修改项目名称
			edit(index) {
				if (index == 1) {
					this.$tools.goPageNoAuth('./editName?index=' + index + '&groupName=' + this.groupName + '&groupNum=' +
						this.groupNum)
				} else {
					this.$tools.goPageNoAuth('./editName?index=' + index + '&myName=' + this.myName + '&groupNum=' + this
						.groupNum + '&id=' + this.id)
				}
			},
			// 项目成员列表
			ProjectMembers() {
				this.$tools.goPageNoAuth('./ProjectMembersList?groupNum=' + this.groupNum)
			},
		}
	}
</script>

<style scoped>
	.navName {
		background-color: #FFFFFF;
		padding: 30rpx;
		margin: 30rpx 0;
	}

	.sculpture {
		width: 60rpx;
		height: 60rpx;
		min-width: 36rpx;
		min-height: 36rpx;
		border-radius: 50%;
	}

	.sculptureI {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
	}

	.sculptureImg {
		width: 104rpx;
		height: 104rpx;
		max-width: 100%;
		max-height: 100%;
		border-radius: 50%;
		margin: 3rpx;
	}

	.leave {
		width: 554rpx;
		height: 104rpx;
		background: #FF4040;
		border-radius: 8rpx;
		text-align: center;
		line-height: 104rpx;
		color: #FFFFFF;
		margin: 124rpx auto 0;
	}
</style>